<template>
  <form action="">
    <div class="row">
      <div class="search-box">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search for..." v-model="keyWord">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button" @click="searchUsers">Search!</button>
          </span>
        </div><!-- /input-group -->
      </div>
    </div>
  </form>
</template>

<script>
  // import axios from "axios";

  export default {
    name: "Search",
    data() {
      return {
        keyWord: ""
      }
    },
    methods: {
      searchUsers() {
        // 请求前更新List的数据
        this.$bus.$emit('updateListData', {isFirst: false, isLoading: true, errMsg: "", users: []})
        // axios.get(`http://localhost:8081/search/users?q=${this.keyWord}`).then(
        this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(  
          response => {
            console.log("请求成功了", response.data);
            // 请求成功后更新List的数据
            this.$bus.$emit('updateListData', {isLoading: false, errMsg: "", users: response.data.items})
          },
          error => {
            console.log("请求失败了", error);
            // 请求失败后更新List的数据
            this.$bus.$emit('updateListData', {isLoading: false, errMsg: error.message, users: []})
          }
        )
      }
    }
  }
</script>

<style>
  .search-box {
    width: 50%;
    margin: 10px auto;
  }
</style>